<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>管理员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="/static/css/font.css">
		<link rel="stylesheet" href="/static/css/weadmin.css">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<div class="weadmin-nav">
		    <span class="layui-breadcrumb">
		        <a href="javascript:;">首页</a>
		        <a href="javascript:;">用户管理</a>
		        <a>
		            <cite>用户列表</cite></a>
		    </span>
		    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
		        href="javascript:location.replace(location.href);" title="刷新">
		        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="weadmin-body" style="padding-bottom: 0px;">
		    <div class="layui-row">
		        <form class="layui-form layui-col-md12 we-search">
		            <div class="layui-inline">
		                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		            </div>
		            <button class="layui-btn" lay-submit lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
		        </form>
		    </div>
		    <!-- <div class="weadmin-block">
		        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
		        <button class="layui-btn" onclick="WeAdminShow('添加用户','./add.html')"><i class="layui-icon"></i>添加</button>
		        <span class="fr" style="line-height:40px">共有数据：<span id="count"></span> 条</span>
		    </div> -->
		    <table id="userTable" class="layui-table" lay-filter="test">
			</table>
			<script type="text/html" id="toolbarDemo">
				<div class="layui-btn-container">
				  <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delCheckData"><i class="layui-icon"></i>批量删除</button>
				  <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i>添加</button>
		
				</div>
			  </script>
			<script type="text/html" id="barDemo" >
				<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
				<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>
		    <!-- <div class="page">
				<div>
					<a class="prev" href="">&lt;&lt;</a>
					<a class="num" href="">1</a>
					<span class="current">2</span>
					<a class="num" href="">3</a>
					<a class="num" href="">489</a>
					<a class="next" href="">&gt;&gt;</a>
				</div>
			</div> -->
		</div>
		<script src="/lib/layui/layui.js" charset="utf-8"></script>
    	
    		 
<script>	
	window.userObj={};//全局定义编辑行时从layer中传来的子数据
	layui.use(['table','jquery','layer','form'], function(){
	var table = layui.table,
		$=layui.jquery,
		form=layui.form,
		layer=layui.layer;
	//第一个实例
	var userTable=table.render({
		elem: '#userTable'
		,height: 370
		,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
		,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
		title: '提示'
		,layEvent: 'LAYTABLE_TIPS'
		,icon: 'layui-icon-tips'
		}]
		,url: '/admin/user/userList/getList' //数据接口
		// ,even: true 隔行换色
		,page: {limits:[10,20,30,50,60,'全部']} //开启分页，并自定义分页
		,cols: [[ //表头
			{field: 'checked', title: '复选框',type:'checkbox',fixed: 'left',width:80},
		{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
		,{field: 'username', title: '用户名'}
		,{field: 'sex', title: '性别',templet: function(d){//函数返回一个参数 d，包含接口返回的所有字段和数据
			let val="";  
			if(d.sex=="0"){
				val="男"
			}else{
				val="女"
			}
			return val;
		}}
		,{field: 'mobile', title: '手机号', } 
		,{field: 'email', title: '邮箱', width: 177}
		,{field: 'marry', title: '婚否', width: 80, sort: true}
		,{field: 'userdesc', title: '个人简介',sort: true}
		,{title: '操作', fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
		]]
		,done: function(res, curr, count){
		//如果是异步请求数据方式，res即为你接口返回的信息。
		//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
		console.log(res);//{code: ,data:[],msg: ,count:
		//得到当前页码
		console.log(curr); 
		//得到数据总量
		console.log(count);
		$('.weadmin-block #count').html(count)
	}
	});
	
	//搜索查询
	form.on('submit(sreach)',function(data){
		userTable.reload({
			where: { //设定异步数据接口的额外参数，任意设
				username: data.field.username
			}
			,page: {
				curr: 1 //重新从第 1 页开始
			}
		});
		return false; //阻止表单跳转。
	})
	
	//监听头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus('userTable'); //userTable 即为基础参数 id 对应的值
		var data = checkStatus.data; //获取选中的数据
		console.log(data);//[]
		var ids="";//要删除的用户id
		data.forEach((item,index,arr)=>{
			if(index<arr.length-1){
				ids+=item.id+','
			}else{
				ids+=item.id
			}	
		})
		switch(obj.event){
			//批量删除
			case 'delCheckData':
				if(data.length === 0){
					layer.alert('请至少选择一条数据');
				} else{
					layer.confirm('真的删除这些数据吗？', function(index){
						layer.close(index);
						//向服务端发送删除指令
						$.ajax({
							method:'get',
							url:'/admin/user/userList/del',
							data:{'ids':ids}
						}).then((res)=>{
							if(res.msg==='ok'){
								layer.msg('删除成功', {
									icon: 1
								});
								userTable.reload()//表格重载
								//此处也可以使用 $(".layui-form-checked").not('.header').parents('tr').remove();对表格数据进行删除	
							}
						})
					});
				}
			break;
			case 'add':
				layer.open({
				type: 2,
				area: ['800px', '520px'],
				fixed: false, //不固定
				maxmin: true,
				content: '/admin/user/userList/add'
				});
			break;
		};
	});
	
	//监听行工具事件
	table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	var data = obj.data; //获得当前行数据
	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

	if(layEvent === 'detail'){ //查看
		layer.open({
			type: 2,
			area: ['800px', '450px'],
			fixed: false, //不固定
			maxmin: true,
			content: '/admin/user/userList/detail?id='+data.id
		});
	} else if(layEvent === 'del'){ //删除
	layer.confirm('真的删除行么', function(index){
		layer.close(index);
		//向服务端发送删除指令
		//向服务端发送删除指令
		$.ajax({
			method:'get',
			url:'/admin/user/userList/del',
			data:{'ids':data.id}
		}).then((res)=>{
			if(res.msg==='ok'){
				layer.msg('删除成功', {
					icon: 1
				});
				obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			}
		})
	});
	} else if(layEvent === 'edit'){ //编辑
	//do something
	layer.open({
			type: 2,
			area: ['800px', '450px'],
			fixed: true,
			maxmin: true,
			content: '/admin/user/userList/edit?id='+data.id, //向后端发送请求
			end:function(){
				//同步更新缓存对应的值
				// console.log(userObj,22222)
				// console.log(obj);
				let {username,email,mobile,roleid,sex,marry,userdesc}=userObj
				obj.update({username,email,mobile,roleid,sex,marry,userdesc});
			}
		});
	
	} 
  });
})  
</script>
</body>
</html>